import React from 'react'
import { Button, Col, Form, Input, Radio, Row, Select } from 'antd'
import { withRouter } from 'react-router-dom'
import NavMenu from '../../common/nav-menu'
import { getMySerials } from '../../../actions/user'
import { connect } from 'react-redux'
import UploadComponent from '../../common/upload-component'
import { createVideo } from '../../../actions/video'
import VideoBox from '../../common/video-box'

const {TextArea} = Input
const RadioGroup = Radio.Group
const Option = Select.Option
const formItemLayout = {
  labelCol: {
    xs: {span: 24},
    sm: {span: 8},
  },
  wrapperCol: {
    xs: {span: 24},
    sm: {span: 16},
  },
}
const tailFormItemLayout = {
  wrapperCol: {
    xs: {
      span: 24,
      offset: 0,
    },
    sm: {
      span: 16,
      offset: 8,
    },
  },
}

class NewVideoForm extends React.Component {
  componentDidMount = () => {
    this.props.getMySerials()
  }

  handleSubmit = (e) => {
    e.preventDefault()
    this.props.form.validateFields((err, values) => {
      if (!err) {
        const {user} = this.props
        this.props.createVideo(
          {...values, creatorId: user.id, organizationId: user.currentOrganizationId},
          () => {
            this.props.form.resetFields()
          }
        )
      }
    })
  }

  render () {
    const {serials, form, user, settings} = this.props
    const {getFieldDecorator, getFieldsValue} = form
    const video = {
      ...getFieldsValue(),
      username: user.name
    }
    return <div>
      <NavMenu/>
      <Row>
        <Col span={16}>
          <Form {...formItemLayout} onSubmit={this.handleSubmit}>
            <Form.Item label='名称'>
              {getFieldDecorator('title', {
                rules: [{required: true, message: '请填写名称'}]
              })(
                <Input/>
              )}
            </Form.Item>
            <Form.Item label='描述'>
              {getFieldDecorator('description', {
                rules: [{required: true, message: '请填写描述'}]
              })(
                <TextArea rows={4}/>
              )}
            </Form.Item>
            <Form.Item label='系列'>
              {getFieldDecorator('serialId', {
                rules: [{required: true, message: '请选择系列'}],
              })(
                <Select style={{width: 200}}>
                  <Option value={0}>默认</Option>
                  {serials.map((serial, index) => {
                    return <Option value={serial.id} key={index}>{serial.title}</Option>
                  })}
                </Select>
              )}
            </Form.Item>
            <Form.Item label='可见性'>
              {getFieldDecorator('isAllVisible', {
                rules: [{required: true, message: '请确定可见性'}],
              })(
                <RadioGroup>
                  <Radio value={1}>所有组织可见</Radio>
                  <Radio value={0}>当前组织可见</Radio>
                </RadioGroup>
              )}
            </Form.Item>
            <Form.Item label='是否公开'>
              {getFieldDecorator('isPublic', {
                rules: [{required: true, message: '是否公开'}],
              })(
                <RadioGroup>
                  <Radio value={1}>公开</Radio>
                  <Radio value={0}>需订阅</Radio>
                </RadioGroup>
              )}
            </Form.Item>
            <Form.Item label='发布'>
              {getFieldDecorator('isRelease', {
                rules: [{required: true, message: '是否发布'}],
              })(
                <RadioGroup>
                  <Radio value={1}>是</Radio>
                  <Radio value={0}>否</Radio>
                </RadioGroup>
              )}
            </Form.Item>
            <Form.Item label='封面图片'>
              <Col span={22}>
                {getFieldDecorator('coverUrl', {
                  rules: [{required: true, message: '请上传封面图片'}],
                })(
                  <Input placeholder='请输入图片链接或者上传一张图片'/>
                )}
              </Col>
              <UploadComponent
                env={settings.appContextPath}
                uploadSuccess={coverUrl => form.setFieldsValue({coverUrl})}/>
            </Form.Item>

            <Form.Item label='视频'>
              <Col span={22}>
                {getFieldDecorator('url', {
                  rules: [{required: true, message: '请填写视频链接地址'}]
                })(
                  <Input placeholder='请输入视频链接或者上传一个视频'/>
                )}
              </Col>
              <UploadComponent
                type='video'
                env={settings.appContextPath}
                uploadSuccess={url => form.setFieldsValue({url})}/>
            </Form.Item>
            <Form.Item {...tailFormItemLayout}>
              <Button type='primary' htmlType='submit'>
                创建
              </Button>
            </Form.Item>
          </Form>
        </Col>
        <Col span={7} offset={1}>
          <h4 className='divider'><b>预览</b></h4>
          <VideoBox
            video={{...video, status: video.isPublic ? '公开' : '需订阅'}}/>
        </Col>
      </Row>
    </div>
  }
}

const mapStateToProps = ({settings, serials, user}) => ({
  serials,
  settings,
  user
})
const mapDispatchToProps = dispatch => ({
  getMySerials: () => dispatch(getMySerials()),
  createVideo: (video,callback) => dispatch(createVideo(video,callback))
})
const NewVideoBody = Form.create({name: 'new-serial-body'})(NewVideoForm)

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(NewVideoBody))
